<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />

    <!-- external link for testing only -->
    <link rel="stylesheet" href="../assets/mui/email/mui-email-styletag.css" inline />
    <link rel="stylesheet" href="../assets/mui/email/mui-email-inline.css" />
  </head>
  <body>
    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <center>
            <!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
            <div class="mui-container">
              <div class="mui-panel">
                <div class="mui--text-display4">Display4</div>
                <div class="mui--text-display3">Display3</div>
                <div class="mui--text-display2">Display2</div>
                <div class="mui--text-display1">Display1</div>
                <div class="mui--text-headline">Headline</div>
                <div class="mui--text-title">Title</div>
                <div class="mui--text-subhead">Subhead</div>
                <div class="mui--text-body2">Body2</div>
                <div class="mui--text-body1">Body1</div>
                <div class="mui--text-caption">Caption</div>
                <div class="mui--text-menu">Menu</div>
                <div class="mui--text-button">Button</div>
                <hr>
                <div style="background-color:#444;" class="mui--text-light">
                  <div class="mui--text-display4">Display4</div>
                  <div class="mui--text-display3">Display3</div>
                  <div class="mui--text-display2">Display2</div>
                  <div class="mui--text-display1">Display1</div>
                  <div class="mui--text-headline">Headline</div>
                  <div class="mui--text-title">Title</div>
                  <div class="mui--text-subhead">Subhead</div>
                  <div class="mui--text-body2">Body2</div>
                  <div class="mui--text-body1">Body1</div>
                  <div class="mui--text-caption">Caption</div>
                  <div class="mui--text-menu">Menu</div>
                  <div class="mui--text-button">Button</div>
                </div>
                <hr>
                <div class="mui--text-accent">
                  <div class="mui--text-display4">Display4</div>
                  <div class="mui--text-display3">Display3</div>
                  <div class="mui--text-display2">Display2</div>
                  <div class="mui--text-display1">Display1</div>
                  <div class="mui--text-headline">Headline</div>
                  <div class="mui--text-title">Title</div>
                  <div class="mui--text-subhead">Subhead</div>
                  <div class="mui--text-body2">Body2</div>
                  <div class="mui--text-body1">Body1</div>
                  <div class="mui--text-caption">Caption</div>
                  <div class="mui--text-menu">Menu</div>
                  <div class="mui--text-button">Button</div>
                </div>
              </div>

              <!-- with color helpers -->
              <div class="mui-panel">
                <div class="mui--text-display4 mui--text-dark-secondary">Display4</div>
                <div class="mui--text-display3 mui--text-dark-secondary">Display3</div>
                <div class="mui--text-display2 mui--text-dark-secondary">Display2</div>
                <div class="mui--text-display1 mui--text-dark-secondary">Display1</div>
                <div class="mui--text-headline mui--text-dark">Headline</div>
                <div class="mui--text-title mui--text-dark">Title</div>
                <div class="mui--text-subhead mui--text-dark">Subhead</div>
                <div class="mui--text-body2 mui--text-dark">Body2</div>
                <div class="mui--text-body1 mui--text-dark">Body1</div>
                <div class="mui--text-caption mui--text-dark-secondary">Caption</div>
                <div class="mui--text-menu mui--text-dark">Menu</div>
                <div class="mui--text-button mui--text-dark">Button</div>
                <hr>
                <div style="background-color:#444;">
                  <div class="mui--text-display4 mui--text-light-secondary">Display4</div>
                  <div class="mui--text-display3 mui--text-light-secondary">Display3</div>
                  <div class="mui--text-display2 mui--text-light-secondary">Display2</div>
                  <div class="mui--text-display1 mui--text-light-secondary">Display1</div>
                  <div class="mui--text-headline mui--text-light">Headline</div>
                  <div class="mui--text-title mui--text-light">Title</div>
                  <div class="mui--text-subhead mui--text-light">Subhead</div>
                  <div class="mui--text-body2 mui--text-light">Body2</div>
                  <div class="mui--text-body1 mui--text-light">Body1</div>
                  <div class="mui--text-caption mui--text-light-secondary">Caption</div>
                  <div class="mui--text-menu mui--text-light">Menu</div>
                  <div class="mui--text-button mui--text-light">Button</div>
                </div>
                <hr>
                <div class="mui--text-display4 mui--text-accent-secondary">Display4</div>
                <div class="mui--text-display3 mui--text-accent-secondary">Display3</div>
                <div class="mui--text-display2 mui--text-accent-secondary">Display2</div>
                <div class="mui--text-display1 mui--text-accent-secondary">Display1</div>
                <div class="mui--text-headline mui--text-accent">Headline</div>
                <div class="mui--text-title mui--text-accent">Title</div>
                <div class="mui--text-subhead mui--text-accent">Subhead</div>
                <div class="mui--text-body2 mui--text-accent">Body2</div>
                <div class="mui--text-body1 mui--text-accent">Body1</div>
                <div class="mui--text-caption mui--text-accent-secondary">Caption</div>
                <div class="mui--text-menu mui--text-accent">Menu</div>
                <div class="mui--text-button mui--text-accent">Button</div>
              </div>
            </div>
            <!--[if mso]></td></tr></table><![endif]-->
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
